{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <el-card class="box-card content">
                <div slot="header" class="search">
                    <el-date-picker
                        size="small"
                        v-model="search.date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="截止日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-input style="width: 200px" size="small" @keyup.enter.native="searchList" placeholder="搜索" v-model="search.keyword"></el-input>
                    <el-button type="primary" size="small" @click="searchList()">搜索</el-button>
                </div>
                <div class="list" v-infinite-scroll="list" :infinite-scroll-disabled="disabled">
                    <div class="item" v-for="(item, index) in data">
                        <div v-if="item.news" class="details">
                            <a class="title" :href="item.news.url" target="_blank">{{item.news.title}}</a>
                            <div>
                                <div class="tag"><i class="el-icon-collection"></i>{{item.news.collect_count}}收藏</div>
                                <div class="tag"><i class="el-icon-chat-round"></i>{{item.news.comment_count}}评论</div>
                                <div class="tag"><i class="el-icon-view"></i>{{item.news.clicks}}浏览</div>
                                <div class="tag remove" @click="remove(item, index)"><i class="el-icon-close"></i>删除</div>
                            </div>
                        </div>
                        <a v-else class="title">此篇文章已被删除</a>
                        <div class="time">{{item.create_time}}</div>
                    </div>
                    <div v-if="loading" class="el-loader">加载中...</div>
                    <div v-if="noMore && loading === false" class="el-nomore">没有更多啦</div>
                </div>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                data: [],
                search:{
                    page: 1,
                    date: [],
                    keyword: "",
                },
                loading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        computed: {
            noMore() {
                return this.count <= this.data.length;
            },
            disabled() {
                return this.loading || this.noMore;
            }
        },
        methods: {
            /**
             * 加载列表
             */
            list() {
                let self = this;
                self.loading = true;
                post('api/cms/userNewsCollect/index', self.search, function (res) {
                    if (res.status === 'success') {
                        self.search.page++;
                        self.data  = self.data.concat(res.data);
                        self.count = res.count;
                    }
                    self.loading = false;
                })
            },
            /**
             * 搜索
             */
            searchList() {
                this.search.page = 1;
                this.data = [];
                this.list();
            },
            /**
             * 删除
             */
            remove(item,index) {
                let self = this;
                self.$confirm('确定删除吗？', '', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    post('api/cms/userNewsCollect/delete', {id: item.news.id}, function (res) {
                        if (res.status === 'success') {
                            self.count--;
                            self.data.splice(index, 1);
                        } else {
                            self.$notify({message: res.message, type: res.status});
                        }
                    })
                }).catch(() => {});
            },
        },
    });
</script>
</body>
</html>